<template>
    <ex-dialog
      width="500px"
      class="ex-diolog"
      :title="title"
      :visible="visible"
      :close-on-click-modal="false"
      @closeDialog="handleClose"
    >
      <div class="main" v-loading="loading">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="" prop="name" label-width="0">
            <el-form-item label="已选订单数:">{{selectIdList.length}} </el-form-item>
            <el-form-item label="退款金额:">{{selectTotalAmount}}</el-form-item>
            <el-form-item label="操作:" prop="type" > 
                <el-select v-model="ruleForm.type"  placeholder="请选择" clearable style="width: 200px">
                    <el-option v-for="dict in reviewStatusList" :key="dict.id" :label="dict.value" :value="dict.id" />
                </el-select>
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleClose('ruleForm')">取消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')" :loading="AgreeLoading">同意</el-button>
          </el-form-item>
        </el-form>
      </div>
    </ex-dialog>
  </template>
  <script>
  // api
  import {
    refundExamineBatch
    } from "@/api/syFundManagement/zhuanReturn";
  export default {
    props: {
      visible: Boolean,
      selectTotalAmount:Number,
      selectIdList:Array,
    },
    data() {
      return {
        title: "批量审核订单",
        loading: false,
        AgreeLoading: false,
        ruleForm: {
          type:'',
        },
        reviewStatusList:[
            {id:1,value:'通过'},
            {id:2,value:'驳回'},
        ],
        rules: {
            type: [
              {required: true,message: "请选择操作状态",trigger: ["change"]}
            ],
        },
        
      };
    },
    computed: {},
    created() {

    },
    methods: {
      //取消
      handleClose(formName) {
        this.$emit("update:visible", false);
      },
      //勾选活动奖励
      
      submitForm(formName) {
        //创建确定
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.AgreeLoading = true
            var data = {
              list:this.selectIdList,
              type:this.ruleForm.type
            }
            console.log('data',data)
            refundExamineBatch(data).then(res => {
                setTimeout(() => {
                    this.handleClose()
                    this.$message.success(res.result)
                    this.$emit('success')
                    this.AgreeLoading = false
                }, 1000);
              }).finally(()=>{
                this.AgreeLoading = false
              })
            
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      
    }
  };
  </script>
  <style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }
  
    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }
  .title{
    font-size: 18px;
    font-weight: bold;
    color: #1890ff;
    padding: 10px 0;
    border-bottom: 4px solid #1890ff;
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
    span{
      padding-top: 8px;
    }
  }
  .checkBox{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    .el-select{
      margin: 0 8px;
      width: 200px;
    }
    .el-input{
      width: 100px;
      margin: 0 8px;
    }
    .el-form-item{
      display: flex;
    }
  }
  .timeBox{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .el-input{
      width: 110px;
      margin: 0 8px;
    }
    span{
      margin: 0 8px;
    }
  }
  .inpBox{
    display: flex;
    justify-content: flex-start;
    // align-items: center;
    .blue{
      color: #1890ff;
      margin-top: 10px;
    }
    .el-input{
      width: 150px;
      margin: 0 8px;
    }
    .el-select{
      width: 150px;
    }
    
    ::v-deep .el-input-group__append{
      padding: 0 8px !important;
    }
  }
  .stockNum{
      margin: 8px 0 0 5px;
    }
  .tipsBox{
    margin: 14px 0;
    color: red;
  }
  .calculateBox{
    display: flex;
    justify-content: center;
    .biaoG{
      margin-right: 20px;
      border: 1px solid #dfe6ec;
      .head{
        display: flex;
        width: 400px;
        border-bottom: 1px solid #dfe6ec;
        div{
          display: flex;
          flex: 1;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          color: #333;
          height: 50px;
        }
        div:first-child{
          border-right: 1px solid #dfe6ec;
        }
      }
    }
  }
  .statusBox{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 50px;
  
    .status{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 50px;
      .tips{
        margin-top: 20px;
      }
    }
  }
  .el-select{
    width: 100%;
  }
  .button_box{
    display: flex;
    justify-content: center;
    margin-top: 24px;
  }
  </style>
  